<template>
<div class="management-user-add views-container">
  <section class="flex-row flex-warp form-group">
         <div class="wlm-form">
          <div class="wlm-form-header">添加商品参数</div>
          <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
              <el-form-item label="商品参数名称">
                <el-input v-model.trim="formFormatData.formData.title">
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="value">
              <el-table :ref="tableFormatData.platformPack.key" :data="formFormatData.formData.value" style="width: 100%;margin-top: 25px;margin-right:20px">
                      <el-table-column width="60">
                      </el-table-column>
                      <el-table-column prop="date" label="参数名称" header-align="left" align="left">
                          <template slot-scope="scope">
                              <el-input  type="textarea"  :autosize="{ minRows: 1, maxRows: 4}" style="width: auto;" v-model.trim="scope.row.name" placeholder="请输入参数名称"></el-input>
                          </template>
                      </el-table-column>
                      <el-table-column prop="name" label="参数值" align="left">
                          <template slot-scope="scope">
                              <el-input type="textarea"  :autosize="{ minRows: 1, maxRows: 4}" style="width: auto;" v-model.trim="scope.row.value" placeholder="请输入参数值"></el-input>
                          </template>
                      </el-table-column>
                      <el-table-column prop="address" label="操作" header-align="left" align="left">
                          <template slot-scope="scope">
                              <div class="operation-group">
                                  <el-button class="wlm-text" type="text" @click="delParameterMerchandise(scope.$index)">删除</el-button>
                              </div>
                          </template>
                      </el-table-column>
                  </el-table>
                  <el-button @click="addParameterMerchandise" size="small" type="primary" icon="el-icon-circle-plus-outline" style="margin-left: 35px;margin-top: 25px;"> 添加新参数</el-button>
                  </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="wlm-form" style="width: 150px;">
            <div class="wlm-form-header">商品参数预览</div>
            <div class="wlm-form-content">
                <el-form :model="formFormatData.formData" size="small" label-width="120px" class="retail-form" label-position="right">
                    <el-form-item class="wlm-form-parameter" v-for="(item, index) in formFormatData.formData.value" :key="index" :label="item.name">
                        <span>{{item.value}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>

  <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
    <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchandise/parameterMerchandise', code: 1 }})" type="primary">保存</el-button>
    <router-link tag="span" to="/merchandise/parameterMerchandise">
      <el-button size="small">返回</el-button>
    </router-link>
  </div>
</div>
</template>

<script>
// import { userAdd } from '@/api/user'
import {
  parameterEdit,
  parameteGet
} from '@/api/merchandise'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'ManagementUserAdd',
  components: {

  },
  computed: {
    isTrim() {
      let isError = true
      this.formFormatData.formData.value.some((item, index) => {
        if (item.name !== '' && item.value !== '') {
          isError = false
          return isError
        }
      })
      return isError
    }
  },
  directives: {

  },
  data() {
    var checkTrim = (rule, value, callback) => {
      const { message } = rule
      const values = this.formFormatData.formData.value
      if (Array.isArray(values) && values.length === 0) {
        return callback(new Error(`${message}！~`))
      } else if (Array.isArray(values)) {
        const isError = values.findIndex(item => {
          return item.name === '' || item.value === ''
        })

        if (isError !== -1) {
          return callback(new Error(`${message}！~`))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      tableFormatData: {
        current: 'platformPack',
        platformPack: {
          key: 'platformPack'

        }
      },
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: parameteGet,
            params: {
              id: ''
            }
          },
          submitForm: parameterEdit
        },
        formData: {
          title: '',
          value: [{
            name: '',
            value: ''
          }]
        },
        rules: {
          value: [{
            message: '请补全商品参数信息~!',
            required: true,
            validator: checkTrim,
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    addParameterMerchandise() {
      const params = this.formFormatData.formData.title
      if (params) {
        if (!this.isTrim) {
          this.formFormatData.formData['value'].push({
            name: '',
            value: ''
          })
        } else {
          this.$message.error('请填写参数项')
        }
      } else {
        this.$message.error('请输入商品参数名称')
      }
    },
    delParameterMerchandise($index) {
      if (this.formFormatData.formData.value.length > 1) {
        this.formFormatData.formData.value.splice($index, 1)
      } else {
        this.$message.error('至少保留一项参数!~')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.management-user-add {
  .form-group {
        .wlm-form {
            width: 500px;
            flex-grow: 1;
        }
        .wlm-form:first-child {
            margin-right: 20px;
        }
    }
}
</style>
